<template>
  <div>
    <el-cascader placeholder="请选择" :value="depart" :filterable="false" change-on-select @change="changed" :clearable="true" large  :show-all-levels="false" :props="props" :options="departs"></el-cascader>
  </div>
</template>

<script>
export default {
  name: 'Depart',
  props: ['selectedDepart'],
  components: {
    // VueResource
  },
  data: function() {
    return {
      depart: this.selectedDepart,
      departs: [],
      props:{
        value: 'id',
        label: 'name',
        children: 'subDepartments',
      }
    }
  },
  methods: {
    loaddata: function() {
      this.$http.post('/hr/department/list')
        .then(response => {
          this.showDepart(response)
        }, response => {
          console.log('failed:' + response.data)
        })
    },
    changed: function(value) {
      this.depart = value
      this.$emit('departchanged', value)
    },
    rescurTree(treeData){
      for (var index in treeData) {
        if( treeData[index].subDepartments){
          this.rescurTree(treeData[index].subDepartments);
        }
        else{
          //treeData[index].subDepartments = new Array()
        }
      }
    },
    showDepart(response) {
      let treeData = JSON.parse(response.bodyText).body
      //this.rescurTree(treeData)
      this.departs = treeData
      this.$store.commit("SET_DEPARTS", this.treeData);
    }
  },
  created: function() {
    this.loaddata()
  }
}
</script>
